<template>
  <!-- <view class='nav acea-row acea-row' :class="{borderShow:isBorader}" v-if="menus.length"> -->
  <view class='nav acea-row'
        :class="{borderShow:isBorader}">
    <view class="nav-flex">
      <view class="nav-left">
        <img class="img-wh mr-m"
             src="/static/images/rank01.png"
             alt="" @click="menusTap(1)">
        <img class="img-wh mr-x"
             src="/static/images/rank02.png"
             alt=""
             @click="menusTap(2)">
      </view>
      <view class="nav-right">
        <img class="img-j"
             src="/static/images/rank03.png"
             alt="" @click="menusTap(3)">
      </view>
    </view>
    <view class="nav-rank">
      <img class="img-rank"
           src="/static/images/rank.png"
           alt="" @click="menusTap(4)">
    </view>
    <!-- <block v-for="(item,index) in menus" :key="index">
			<view class='item' @click="menusTap(item.info[1].value)">
				<view class='pictrue'>
					<image :src='item.img'></image>
				</view>
				<view class="menu-txt">{{item.info[0].value}}</view>
			</view>
		</block> -->
  </view>
</template>

<script>
let app = getApp()
import { goPage } from '@/libs/order.js'
import { log } from 'util'
export default {
  name: 'c_menus',
  props: {
    dataConfig: {
      type: Object,
      default: () => {},
    },
    activeName: {
      type: String,
      default: '',
    },
  },
  watch: {
    activeName: {
      handler(nVal, oVal) {
        if (nVal == this.name && app.globalData.isIframe) {
          this.isBorader = true
        } else {
          this.isBorader = false
        }
      },
      deep: true,
    },
  },
  data() {
    return {
      menus: this.dataConfig.imgList.list,
      isBorader: false,
      name: this.$options.name,
    }
  },
  created() {},
  mounted() {},
  methods: {
    menusTap(type) {
      if(type == 1) {
         uni.navigateTo({
            url: '/pages/users/goods_open_group/index',
          })
      } else if(type == 2) {
        uni.switchTab({
    			url:'/pages/users/pingtuan/pingtuan'
    		})
      } else if (type ==3) {
         this.$util.Tips({title:'开发中，敬请期待哦！'})
      } else {
         this.$util.Tips({title:'开发中，敬请期待哦！'})
      }
     
    },
    // menusTap(url) {
    // 	goPage().then(res=>{
    // 		console.log('url', url)
    // 		if(url.indexOf("http") != -1){
    // 			// #ifdef H5
    // 			location.href = url
    // 			// #endif
    // 		}else{
    // 			if(['/pages/users/pingtuan/pingtuan','/pages/order_addcart/order_addcart','/pages/user/index'].indexOf(url) == -1){
    // 				uni.navigateTo({
    // 					url:url
    // 				})
    // 			}else{
    // 				uni.switchTab({
    // 					url:url
    // 				})
    // 			}
    // 		}
    // 	})
    // }
  },
}
</script>

<style lang="scss">
.nav {
  background-color: #fff;
  // padding-bottom: 30rpx;
  .nav-flex {
    display: flex;
    .nav-left {
      flex: 50%;
    }
    .nav-right {
      flex: 50%;
      padding: 16rpx 16rpx 16rpx 0;
    }
    .img-wh {
      width: 400rpx;
      height: 200rpx;
    }
    .mr-m {
      margin-top: 4rpx;
      margin-bottom: -16rpx;
    }
    .mr-x {
      padding: 0 8rpx;
      margin-bottom: -14rpx;
    }
    .img-j {
      width: 100%;
      height: 100%;
    }
  }
  .nav-rank {
    width: 100%;
    height: 200rpx;
    background-color: #ccc;
    .img-rank {
      width: 100%;
      height: 100%;
    }
  }
  .item {
    margin-top: 30rpx;
    width: 25%;
    text-align: center;
    font-size: 24rpx;

    .pictrue {
      width: 82rpx;
      height: 82rpx;
      margin: 0 auto;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .menu-txt {
      margin-top: 15rpx;
    }

    &.four {
      width: 25%;

      .pictrue {
        width: 90rpx;
        height: 90rpx;
      }
    }
  }
}
</style>
